<template>
    <view>
        <view class="background"></view>
        <navView navTitle="消息通知" backgroundColor="#008efe" titleColor="#fff" :isBack="true"></navView>

        <!-- 通知列表 -->
        <view class="notice-list">
            <view class="notice-item" v-for="item in messageList" :key="item.id" @tap="setMessageRead(item.id)">
                <view class="notice-header">
                    <text class="notice-status" :class="{ 'unread': !item.isRead }">
                        {{ item.isRead ? '已读' : '未读' }}
                    </text>
                </view>
                <view class="notice-content">{{ item.content }}</view>
                <view class="notice-footer">
                    <text class="notice-time">{{ item.time }}</text>
                    <uni-icons type="right" size="28rpx" color="#BFBFBF"></uni-icons>
                </view>
            </view>

            <!-- 分页提示 -->
            <view class="page-tips" v-if="messageList.length > 0">
                <text v-if="currentPage < totalPages">加载中...</text>
                <text v-else>没有更多了</text>
            </view>

            <!-- 空状态 -->
            <view class="empty-box" v-if="messageList.length === 0">
                <image class="empty-icon"  mode="aspectFit">
                </image>
                <text class="empty-text">暂无新消息</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            messageList: [],
            currentPage: 1,
            totalPages: 1,
            isLoading: false
        };
    },
    onLoad() {
        this.getMessageInfo();
    },
    onReachBottom() {
        if (this.currentPage < this.totalPages && !this.isLoading) {
            this.currentPage++;
            this.getMessageInfo();
        }
    },
    methods: {
        async getMessageInfo() {
            this.isLoading = true;
            try {
                const res = await this.$request('/addons/qingdong/message/getList', 'GET', {
                    page: this.currentPage
                });

                this.totalPages = res.data.last_page;
                const newList = res.data.data.map(item => ({
                    id: item.id,
                    content: item.content,
                    time: item.send_time.replace(/:\d{2}$/, ''),
                    isRead: item.status === 1
                }));

                this.messageList = this.currentPage === 1
                    ? newList
                    : [...this.messageList, ...newList];

            } finally {
                this.isLoading = false;
            }
        },
        async setMessageRead(id) {
            await this.$request('/addons/qingdong/message/setRead', 'POST', { id });
            const index = this.messageList.findIndex(item => item.id === id);
            if (index > -1) {
                this.$set(this.messageList, index, {
                    ...this.messageList[index],
                    isRead: true
                });
            }
        }
    }
}
</script>

<style lang="less">
.page-tips {
    text-align: center;
    padding: 20rpx;
    color: #999;
    font-size: 24rpx;
}
.notice-list {
    padding: 30rpx;

    .notice-item {
        background: #fff;
        border-radius: 16rpx;
        padding: 24rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

        .notice-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;

            .notice-title {
                font-size: 32rpx;
                font-weight: 500;
                color: #333;
            }

            .notice-status {
                font-size: 24rpx;

                &.unread {
                    color: #008efe;
                }
            }
        }

        .notice-content {
            font-size: 28rpx;
            color: #666;
            line-height: 1.6;
            margin-bottom: 20rpx;
        }

        .notice-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1rpx solid #eee;
            padding-top: 20rpx;

            .notice-time {
                font-size: 24rpx;
                color: #999;
            }
        }
    }

    .empty-box {
        text-align: center;
        padding: 100rpx 0;

        .empty-icon {
            width: 240rpx;
            height: 240rpx;
            margin-bottom: 40rpx;
        }

        .empty-text {
            display: block;
            color: #999;
            font-size: 28rpx;
        }
    }
}
</style>